<template>
  <div>
    <!-- 自定义表格组件 -->
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="自定义表格" name="1">
        <h3>设置偏好</h3>
        <div>
          <span>显示顺序：</span>
          <el-button
            type="primary"
            v-for="(item,index) in attributeOrder"
            :key="item.attr"
            size="small"
            @click="changeShow(item)"
            plain
          >{{index+1}}:{{item.show}}</el-button>
        </div>

        <div :int_s="int" :cloneInt_s="cloneInt">
          <div>
            <span>修改属性名：</span>
            <el-input v-model="cloneInt.show" :disabled="(cloneInt.show==null)||swi"></el-input>
          </div>
          <div>
            <el-button type="primary" @click="saveData(int,cloneInt)">保存</el-button>
          </div>
        </div>
        <div v-for="item in attributeOrderClone" :key="item.attr">
          {{item.show}}属性：
          <input
            name="attributeOrder"
            type="checkbox"
            v-model="attributeOrderCloneTwiceL"
            :value="item"
          />
        </div>
      </el-collapse-item>
      <el-collapse-item title="自定义布局" name="2">
        <div>
          <p>
            <span>可移动/不可移动：</span>
            <el-switch
              v-model="switchForLa.draggable"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </p>
          <p>
            <span>可调整大小/不可调整大小：</span>
            <el-switch
              v-model="switchForLa.resizable"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </p>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //折叠面板
      activeNames: [],
      //属性顺序深克隆
      attributeOrderClone: [],
      //开关
      swis: false,
      swi: false,
      //修改属性的绑定值
      int: "",
      //设置新属性名，用来深克隆的
      cloneInt: "",
      //克隆attributeOrderClone
      attributeOrderCloneTwiceL: []
    };
  },
  watch: {
    attributeOrderCloneTwiceL() {
      console.log(this.attributeOrderCloneTwiceL);
      this.$emit("FTableFunction", this.attributeOrderCloneTwiceL);
    }
  },
  created() {
    //深克隆数据
    this.attributeOrderClone = JSON.parse(JSON.stringify(this.attributeOrder));
    this.attributeOrderCloneTwiceL = JSON.parse(
      JSON.stringify(this.attributeOrderClone)
    );
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    //点击顺序时方法
    changeShow(item) {
      this.swi = false;
      this.int = item;
      this.cloneInt = JSON.parse(JSON.stringify(this.int));
    },
    //保存属性名
    saveData(int, cloneInt) {
      // console.log("int");
      // console.log(int);
      // console.log("cloneInt");
      // console.log(cloneInt);
      // console.log("this.dataAttribute");
      // console.log(this.dataAttribute);
      // console.log("this.attributeOrder");
      // console.log(this.attributeOrder);
      // console.log("this.attributeOrderClone");
      // console.log(this.attributeOrderClone);
      // console.log("this.attributeOrderCloneTwiceL");
      // console.log(this.attributeOrderCloneTwiceL);
      for (let i = 0; i < this.attributeOrder.length; i++) {
        if (
          cloneInt.attr == this.attributeOrder[i].attr &&
          cloneInt.show != this.attributeOrder[i].show
        ) {
          // console.log("00000000000000000");
          // console.log(this.attributeOrder[i]);
          // console.log(cloneInt);
          this.attributeOrder[i].show = cloneInt.show;
          this.attributeOrderCloneTwiceL[i].show = cloneInt.show;
          this.attributeOrderClone[i].show = cloneInt.show;
          this.swi = true;
        }
      }
    }
  },
  props: {
    switchForLa: {
      type: Object
    },
    attributeOrder: {
      type: Array
    },
    dataAttribute: {
      type: Array
    }
  }
};
</script>
